<template>
<div>
  <div>
    <van-nav-bar
        title="找回密码"
        left-text="返回"
        left-arrow
        @click="onClickLeft()"
    />
  </div>
  <div>
    <div>
      <van-image
          round
          width="10rem"
          height="10rem"
          :src="require('../assets/xicha.png')"
      />
    </div>
    <br>
    <br>
    <br>
    <br>
    <div>
          <van-form>
            <van-cell-group inset>
              <van-field
                  v-model="user.phone"
                  label="手机号"
                  placeholder="手机号"
                  :rules="[{ required: true, message: '请填写手机号' }]"
              />
              <van-field
                  v-model="user.code"
                  center
                  clearable
                  label="验证码"
                  placeholder="请输入短信验证码"
              >
                <template #button>
                  <van-button size="small" type="primary" @click="sendCode()" :disabled="btn1">{{str1}}</van-button>
                </template>
              </van-field>
              <van-field
                  v-model="user.password"
                  type="password"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" @click="find()">确认</van-button>
            </div>
          </van-form>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "FindPass",
  data(){
    return{
      user:{
        "city": "北京",
        "code": "",
        "mobile": "iphone13proMax",
        "password": "",
        "phone": ""
      },
      str1:"发送验证码",
      btn1:false,
      second:60
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push("/login");
    },
    sendCode(){
      this.axios.get("/smsLog/find.do?phone="+this.user.phone).then((res)=>{
        if(res.data.code==200){
          var c=setInterval(()=>{
            if(this.second>0){
              this.btn1=true;
              this.second--;
              this.str1=this.second+"(s)";
            }else{
              this.btn1=false;
              this.str1="发送验证码";
              this.second=60;
              clearInterval(c);
            }
          },1000);
        }
      })
    },
    find(){
      this.axios.post("/user/findPassword.do", this.user).then((res) => {
        if(res.data.code==200){
          this.$router.push("/login");
        }else{
          this.$toast(res.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>